<template>
  <div class="submerge">
    <div class="control">
      <div class="top">
        <div>水淹分析</div>
      </div>
      <div class="params">
        <div class="button-box" @click="startFloodFill">
          <button :class="curActiveBtn ? 'active' : 'normal'">开始水淹分析</button>
        </div>

        <div class="button-box" @click="stopFloodFill">
          <button :class="!curActiveBtn ? 'active' : 'normal'">停止水淹分析</button>
        </div>
        <div class="item">
          <div class="label">
            <div class="title">水位高度</div>
            <div class="number">({{ Number(elevation * 1 - minheight).toFixed(1) }}m)</div>
          </div>
          <div class="content"></div>
        </div>
        <div class="range">
          <input type="range" v-model="elevation" :min="minheight" :max="height" step="0.2" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'

const curActiveBtn = ref(false)

// 初始化y轴高度
const elevation = ref(3.4)
// 最大高度
const height = ref(15)
// 最小高度
const minheight = ref(3.4)

// 更新水淹分析
const addFloodFillLayer = async () => {
  const point = [565905.55, 3466376.64]
  let o = {
    id: 'floodFill',
    min: [point[0] - 5000, point[1] - 5000], //水淹分析范围min
    max: [point[0] + 5000, point[1] + 5000], //水淹分析范围max
    seed: point, //出水点 注意：出水点一定要在水淹分析范围[min~max]内，否则接口会报错
    elevation: elevation.value, //水位高度
    color: '#173a49', //水颜色
    precision: 0.6 //水淹模拟精度
  }
  await fdapi.floodFill.add(o)
}
// 更新水面高度
const updateFloodFill = async () => {
  const z = Number(elevation.value)
  fdapi.floodFill.update({
    id: 'floodFill',
    elevation: z
  })
}

let FloodFillInterval: any = null

//开始水淹分析
const startFloodFill = () => {
  if (curActiveBtn.value) return
  if (Number(elevation.value) >= Number(height.value)) {
    elevation.value = minheight.value
  }

  curActiveBtn.value = true

  FloodFillInterval = setInterval(() => {
    if (Number(elevation.value) >= Number(height.value)) {
      stopFloodFill()
    }

    elevation.value = Number(elevation.value) + 0.2
  }, 200)
}
//停止水淹分析
const stopFloodFill = () => {
  curActiveBtn.value = false
  if (FloodFillInterval) clearInterval(FloodFillInterval)
}

// 防抖
const debounce = (func: Function, wait: number) => {
  let timeout: any = null
  return function () {
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(() => {
      func()
    }, wait)
  }
}

watch(elevation, debounce(updateFloodFill, 100))

onMounted(async () => {
  fdapi.camera.set([565152.817539, 3466707.845645, 200.902441, -5.784357, 167.227448, 2])
  addFloodFillLayer()
})

onBeforeUnmount(async () => {
  fdapi.floodFill.delete('floodFill')
})
</script>

<style scoped lang="scss">
$referanceWidth: 2880;
$widthRatio: $referanceWidth / 100;
@mixin WidthCalc($s, $w) {
  width: calc(#{$s} - 1vw * #{$w} / #{$widthRatio});
}

.submerge {
  width: 100%;
  height: 100%;
  z-index: 100;
}

.control {
  @include Width(380);
  @include hHeight(260);
  position: fixed;
  background: url('./images/popup_content.png') no-repeat;
  background-size: 100% 100%;
  z-index: 100;
  @include Right(550);
  @include Bottom(140);
  color: #fff;
  @include FontSize(18);
  @include BorderRadius(20);
  cursor: pointer;
  text-align: center;
}

.control .top {
  font-family: Tencent;
  @include WidthCalc(100%, 20px);
  @include hHeight(40);
  display: flex;
  align-items: center;
  justify-content: space-between;
  @include Padding(8, 10, 0, 20);
  @include FontSize(20);
  color: #ffffff;
  @include BorderRadius(20);
  text-align: left;

  div {
    width: 100%;
    @include Padding(0, 0, 0, 5);
    text-align: left;
  }
}

.control .params {
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  position: relative;
  // @include WidthCalc(100%, 40);
  width: 100%;
  @include hHeight(230);
  max-height: calc(100% - 60px);
  @include Padding(10, 10, 10, 10);
}

.params .title {
  color: #b6b6cf;
  @include Width(100);
  @include MarginBottom(10);
}

.params .item {
  @include hHeight(60);
  display: flex;
  align-items: center;
  @include Width(160);
  @include MarginLeft(15);
  // @include MarginBottom(60);
}

.params .item .label {
  //@include Width(160);
  @include FontSize(18);
  text-align: center;
  display: flex;
  flex-direction: row;
  @include Bottom(60);
  @include MarginBottom(3);
  .title {
    @include MarginLeft(5);
  }
  .number {
    color: #74cadf;
    @include MarginLeft(5);
  }
}
input[type='color'] {
  @include Width(50);
  @include hHeight(25);
  border: 0;
  outline: none;
  @include BorderRadius(5);
}

input[type='color']::-webkit-color-swatch-wrapper {
  @include BorderRadius(5);
  padding: 0;
}

input[type='color']::-webkit-color-swatch {
  /* height: 20px;
      width: 55px; */
  position: relative;
  /* left: -4px;
      top: -4px; */
  border: 0;
  @include BorderRadius(5);
  @include Border(1, #343a41, solid);
}

input[type='text'] {
  @include hHeight(25);
  background: #10d6ab;
  color: #fff;
  @include Border(1, solid, #343a41);
  @include BorderRadius(5);
  // @include Padding(0, 5, 5, 0);
}

input[type='number'] {
  @include hHeight(25);
  background: #2b2f37;
  color: #fff;
  @include Border(1, solid, #343a41);
  @include BorderRadius(5);
  // @include Padding(0, 5, 5, 0);
}

input[type='checkbox'] {
  @include Width(18);
  @include hHeight(18);
  background-color: #26282a !important;
}

.range {
  position: absolute;
  @include Bottom(20);
  @include Right(40);
  @include hHeight(250);
  @include Width(50);
  overflow: hidden;
}

input[type='range'] {
  -webkit-appearance: none; /*清除系统默认样式*/
  background: -webkit-linear-gradient(#74cadf, #74cadf) no-repeat, #ddd; /*设置左边颜色为#61bd12，右边颜色为#ddd*/
  height: 3px; /*横条的高度*/
  position: absolute;
  transform: rotate(270deg);
  @include Width(170);
  @include Left(-60);
  @include Bottom(92);

  &::-webkit-slider-thumb {
    -webkit-appearance: none; /*清除系统默认样式*/
    height: 16px; /*拖动块高度*/
    width: 16px; /*拖动块宽度*/
    background: #fff; /*拖动块背景*/
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 1px #ddd; /*设置边框*/
  }
}

.button-box {
  width: 60%;
  @include MarginTop(30);
  @include MarginBottom(10);
  @include FontSize(18);
  @include MarginLeft(20);
}

button {
  background: url('./images/title.png') no-repeat;
  background-size: 100% 100%;
  @include Padding(8, 10, 10, 8);
  @include BorderRadius(10);
  border: 0;
  color: #fff;
  width: 100%;
  cursor: pointer;
}

.active {
  text-align: start;
  @include PaddingLeft(20);
  color: rgb(252, 252, 248);
  background: url('./images/popup_tiltle.png') no-repeat;
  background-size: 100% 100%;
}
.normal {
  text-align: start;
  @include PaddingLeft(20);
  color: rgb(253, 253, 252);
  background: url('./images/title.png') no-repeat;
  background-size: 100% 100%;
}
</style>
